<template>
	<view class="charts-box">
		<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				// 图表配置
				chartData: {},
				opts: {
					color: ["#ea7ccc"],
				}
			}
		},
		onReady() {
			// 请求统计数据
			this.getData();
		},
		methods: {
			// 请求统计数据
			async getData() {
				const res = await request('/api/plantingHarvest');
				if (res.statusCode === 200) {
					// 计算类目数据
					const categories = res.data.map(item => item.month);
					// 计算统计数据
					const seriesData = res.data.map(item => item.harvest);

					this.chartData = {
						categories,
						series: [{
							name: '全国种植收成情况',
							data: seriesData
						}]
					}
				}
			}
		}
	}
</script>

<style>
	.charts-box {
		margin-top: 60rpx;
		width: 100%;
		height: 300px;
	}
</style>